<template>
  <div>
    <div class="bodybox">
      <div class="loginbox">
        <div class="trangle">
          <!--三角形-->
        </div>
        <div class="inputbox">
          <div class="userinput">
            <input type="text"
                   placeholder="Username"
                   ref="uName"
                   v-model="username" />
            <div ref="noneName"
                 v-show="showNameNone">用户名不能为空</div>
          </div>
          <div class="userinput">
            <input type="password"
                   placeholder="Password"
                   ref="uPassword"
                   v-model="password" />
            <div id="nonePassword"
                 v-show="showPsdNone">密码不能为空</div>
          </div>
          <div class="userinput">
            <input type="password"
                   placeholder="Confirm"
                   ref="uAgain"
                   v-model="confirmPassword" />
            <div id="noneAgain"
                 v-show="showAgain">请输入相同的密码</div>
          </div>
          <div class="btn">
            <button @click="toLogin">Sign In</button>
            <button @click="toRegister">Sign Up</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { registerUser } from '../../network/user';
export default {
  name: 'Register',
  data () {
    return {
      showNameNone: false,
      showPsdNone: false,
      showAgain: false,
      username: '',
      password: '',
      confirmPassword: ''
    }
  },

  methods: {
    toLogin () {
      this.$router.push('/login')
      // if(this.$refs.adminRef.checked) {
      //    return this.$router.push('/home')
      // }
      // if(this.$refs.userRef.checked) {
      //    return this.$router.push('/userhome')
      // }
    },
    toRegister () {
      if (this.$refs.uName.value == '') {
        this.showNameNone = true;
        return
      } else {
        this.showNameNone = false;
      }
      if (this.$refs.uPassword.value == '') {
        this.showPsdNone = true;
        return
      } else {
        this.showPsdNone = false;
      }
      if (this.$refs.uAgain.value == '' || this.$refs.uPassword.value != this.$refs.uAgain.value) {
        this.showAgain = true;
        return
      } else {
        this.showAgain = false;
      }
      this.register();
      //this.$router.push('/login')
    },
    //注册用户
    async register () {
      const res = await registerUser(this.username, this.password);
      console.log(res);
      if (res.status === 1) {
        return this.$message.error('用户名已经存在, 请更改');
      }
      if (res.status === 200) {
        this.$router.push('/login');
        return this.$message.success('注册成功');
      }
      this.$message.error('注册失败')

    }
  }
}
</script>

<style>
.bodybox {
  background: url("../../assets/back.jpg");
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
}

.loginbox {
  height: 450px;
  width: 350px;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 15%;
  left: 20%;
}

.trangle {
  width: 0;
  height: 0;
  position: absolute;
  top: 10%;
  left: 35%;
  border-width: 50px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

.inputbox {
  width: 100%;
  color: #333;
  position: absolute;
  top: 20%;
  padding-left: 25px;
}

.userinput input {
  height: 40px;
  width: 80%;
  border: none;
  border-radius: 0;
  border-bottom: #8d8d8d 1px solid;
  background: none;
  outline: none;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 15px;
}
.userinput div {
  font-size: 10px;
}

.btn {
  width: 100%;
  margin-top: 10px;
}

.btn button {
  height: 30px;
  width: 80%;
  margin-top: 15px;
  border: none;
  border-radius: 15px;
  background-color: #999;
  color: #fff;
}

.btn button:hover {
  background-color: #333333;
  color: #dbe2ec;
}
</style>